<template>
  <div :class="['sidebar-container', { collapsed: isCollapsed }]">
    <div class="logo-container">
      <img src="../picture/logo2.png" alt="Logo" class="logo" />
    </div>
    <el-menu
      :default-active="activeTab"
      class="el-menu-vertical-demo"
      background-color="#304156"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router="true"
    >
      <!-- 首页 -->
      <el-menu-item index="Home" @click="changeTab('首页', 'Home')">
        <el-icon><House /></el-icon><span v-if="!isCollapsed">首页</span>
      </el-menu-item>

      <!-- 租户项目管理 -->
      <el-sub-menu index="TenantManagement">
        <template #title>
          <el-icon><User /></el-icon>
          <span v-if="!isCollapsed">租户项目管理</span>
        </template>
        <el-menu-item index="MemberManagement" @click="changeTab('成员管理', 'MemberManagement')">
          <span v-if="!isCollapsed">成员管理</span>
        </el-menu-item>
        <el-menu-item index="ProjectManagement" @click="changeTab('项目管理', 'ProjectManagement')">
          <span v-if="!isCollapsed">项目管理</span>
        </el-menu-item>
      </el-sub-menu>

      <!-- 造价综合评估 -->
      <el-sub-menu index="CostEvaluation">
        <template #title>
          <el-icon><Suitcase /></el-icon>
          <span v-if="!isCollapsed">造价综合评估</span>
        </template>
        <el-menu-item index="PDFConfirmation" @click="changeTab('确定PDF', 'PDFConfirmation')">
          <span v-if="!isCollapsed">确定PDF</span>
        </el-menu-item>
        <el-menu-item index="WorkloadCalculation" @click="changeTab('计算工作量', 'WorkloadCalculation')">
          <span v-if="!isCollapsed">计算工作量</span>
        </el-menu-item>
        <el-menu-item index="ComprehensiveCalculation" @click="changeTab('综合计算', 'ComprehensiveCalculation')">
          <span v-if="!isCollapsed">综合计算</span>
        </el-menu-item>
      </el-sub-menu>

      <!-- 报告生成 -->
      <el-sub-menu index="ReportGeneration">
        <template #title>
          <el-icon><Notebook /></el-icon>
          <span v-if="!isCollapsed">报告生成</span>
        </template>
        <el-menu-item index="ReportManagement" @click="changeTab('报告管理', 'ReportManagement')">
          <span v-if="!isCollapsed">报告管理</span>
        </el-menu-item>
        <el-menu-item index="ReportReview" @click="changeTab('报告审核', 'ReportReview')">
          <span v-if="!isCollapsed">报告审核</span>
        </el-menu-item>
        <el-menu-item index="Dashboard" @click="changeTab('数据看板', 'Dashboard')">
          <span v-if="!isCollapsed">数据看板</span>
        </el-menu-item>
        <el-menu-item index="ReportExport" @click="changeTab('报告导出', 'ReportExport')">
          <span v-if="!isCollapsed">报告导出</span>
        </el-menu-item>
        <el-menu-item index="Visualization" @click="changeTab('可视化', 'Visualization')">
          <span v-if="!isCollapsed">可视化</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { House, User, Suitcase, Notebook } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

const activeTab = ref<string>(route.name as string)
const isCollapsed = ref<boolean>(false)

const changeTab = (title: string, name: string) => {
  activeTab.value = name
  localStorage.setItem('activeTab', name)
  router.push({ name })
}

// 同步侧边栏和主界面活动的标签页
watch(activeTab, (newTab) => {
  if (newTab) {
    router.push({ name: newTab as string })
    localStorage.setItem('activeTab', newTab as string)
  }
})

router.afterEach((to) => {
  activeTab.value = to.name as string
  localStorage.setItem('activeTab', to.name as string)
})

watch(isCollapsed, (newVal) => {
  const sidebar = document.querySelector('.sidebar-container')
  if (sidebar) {
    if (newVal) {
      sidebar.classList.add('collapsed')
    } else {
      sidebar.classList.remove('collapsed')
    }
  }
})
</script>

<style scoped>
.sidebar-container {
  width: 200px;
  min-height: 100vh;
  background-color: #304156;
  color: #fff;
  transition: width 0.5s ease;
}

.sidebar-container.collapsed {
  width: 60px;
}

.logo-container {
  padding-top: 5px;
  padding-bottom: 3px;
  text-align: center;
  background-color: #304156;
}

.logo {
  width: 180px;
  height: 50px;
}

.sidebar-container.collapsed .logo {
  display: none;
}

.el-menu-vertical-demo {
  background-color: #304156;
  color: #fff;
}

.el-menu-item .el-icon {
  margin-right: 10px;
}

.sidebar-container.collapsed .el-menu-item .el-icon {
  margin-right: 0;
}

.sidebar-container.collapsed .el-menu-item span,
.sidebar-container.collapsed .el-sub-menu span {
  display: none;
}
</style>
